import React, { Component } from 'react'

import { Link } from 'react-router-dom'
import { Grid, Button , Toast, Modal} from 'antd-mobile'

import { bUrl } from '../../utils/url'
import { isAuth, removeToken } from '../../utils/auth'

import styles from './index.module.css'
import request from '../../utils/request'

// 菜单数据
const menus = [
  { id: 1, name: '我的收藏', iconfont: 'icon-coll', to: '/favorate' },
  { id: 2, name: '我的出租', iconfont: 'icon-ind', to: '/rent' },
  { id: 3, name: '看房记录', iconfont: 'icon-record' },
  {
    id: 4,
    name: '成为房主',
    iconfont: 'icon-identity'
  },
  { id: 5, name: '个人资料', iconfont: 'icon-myinfo' },
  { id: 6, name: '联系我们', iconfont: 'icon-cust' }
]

// 默认信息
const userinfo = {
  avatar :  '/img/profile/avatar.png',
  nickname: '游客'
}
export default class Profile extends Component {
  state = {
    isLogin: isAuth(), // 拿到当前的token布尔值
    userinfo // 用来保护用户信息的
  }
  componentDidMount (){
    this.getUserif()
  }
  async getUserif () {
    const { isLogin } = this.state
    if (isLogin) {
      const { data: res } = await request('/user')
      if (res.status === 200) {
        this.setState(_ => {
          return {
            userinfo: res.body
          }
        })
      } else { // token失效，防止显示出现混乱
        this.setState(_ => {
          return {
            isLogin: false
          }
        })
      }
      
    } else {
      Toast.info('您还没有登录哦', 1)

    }
  }
  logout = () =>{
    const alert = Modal.alert
    alert('退出提示', '您确定要退出嘛', [
      { text: '取消', onPress: () => Toast.info('取消退出', 2) },
      { text: '确定', onPress: () => {
        this.setState({
          isLogin: false,
          userinfo // 初始化我的数据
        })
        removeToken()
        Toast.info('退出登录成功', 2)
      } }
    ])
    
  }
  renderInfo () {
    const { isLogin } = this.state
    const { history } = this.props
    return (
      isLogin? <>
                <div className={styles.auth}>
                  <span onClick={this.logout}>退出</span>
                </div>
                <div className={styles.edit}>
                  编辑个人资料
                  <span className={styles.arrow}>
                    <i className="iconfont icon-arrow" />
                  </span>
                </div>
              </>: <div className={styles.edit}>
                <Button
                  type="primary"
                  size="small"
                  inline
                  onClick={() => history.push('/login')}
                >
                  去登录
                </Button>
              </div>
    )
  }
  render() {
    const { userinfo } = this.state
    return (
      <div className={styles.root}>
        {/* 个人信息 */}
        <div className={styles.title}>
          <img
            className={styles.bg}
            src={bUrl + '/img/profile/bg.png'}
            alt="背景图"
          />
          <div className={styles.info}>
            <div className={styles.myIcon}>
              <img className={styles.avatar} src={bUrl + userinfo.avatar} alt="icon" />
            </div>
            <div className={styles.user}>
              <div className={styles.name}>{userinfo.nickname}</div>
              {/* 登录后展示： */}
             {this.renderInfo()}
            </div>
          </div>
        </div>

        {/* 九宫格菜单 */}
        <Grid
          data={menus}
          columnNum={3}
          hasLine={false}
          renderItem={item =>
            item.to ? (
              <Link to={item.to}>
                <div className={styles.menuItem}>
                  <i className={`iconfont ${item.iconfont}`} />
                  <span>{item.name}</span>
                </div>
              </Link>
            ) : (
              <div className={styles.menuItem}>
                <i className={`iconfont ${item.iconfont}`} />
                <span>{item.name}</span>
              </div>
            )
          }
        />

        {/* 加入我们 */}
        <div className={styles.ad}>
          <img src={bUrl + '/img/profile/join.png'} alt="" />
        </div>
      </div>
    )
  }
}
